<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px" :inline="true">
        <el-form-item label="请选择常数类别">
            <el-select
                    @change = "typeChange"
                    v-model="selectType"
                    placeholder="请选择常数类别..."
                    size="large"
                    style="width: 240px"
            >
                <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.constanttypename"
                        :value="item.id"
                />
            </el-select>
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="toAdd">添加</el-button>
        </el-form-item>
    </el-form>

    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="constanttypeid" label="常数类别ID" width="180"/>
            <el-table-column prop="constantcode" label="常数项编码" width="180"/>
            <el-table-column prop="constantname" label="常数项名称" width="180"/>
            <el-table-column label="操作">
                <template #default="solt">
                    <el-button link type="primary" size="small"  @click="toEdit(solt)"> 编辑 :{{solt.row.id}}</el-button>
                    <el-button link type="primary" size="small" @click="removeByitemId(solt.row.id)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
    </div>



    <!-- 添加表单 dialogFormVisible 表示是否显示，  boolean   -->
  <el-dialog v-model="editDialogFormVisible" title="常数项编辑" width="500">
    <el-form :model="editForm" label-width="auto"  >
      <el-form-item label="常数类别ID">
        <el-input v-model="editForm.constanttypeid" />
      </el-form-item>
      <el-form-item label="常数项编码">
        <el-input v-model="editForm.constantcode" />
      </el-form-item>
      <el-form-item label="常数项名称">
        <el-input v-model="editForm.constantname" />
      </el-form-item>
      
        <el-form-item >
              <el-button type="primary"  @click="save" >保存</el-button>
      </el-form-item>
    </el-form>


  </el-dialog>
</template>


<script setup>
    import {onMounted, onUnmounted, ref} from 'vue'
    import {ElNotification} from 'element-plus'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import service from '@/utils/request'

    let selectType = ref('')    //常数类别列表用户选择的typeid
    let options = ref([])   //常数类别列表
    let form = ref({});
    let editForm = ref({
        constanttypeid:'',
        constantcode:'',
        constantname:''
    });
    //是否显示 dialog
    let editDialogFormVisible = ref(false);

    //提交数据 到
    function onSubmit() {
        console.log("form", form.value);
    }

    //表格的数据
    let tableData = ref([])

    function toAdd() {

        editDialogFormVisible.value = true;

    }

    function typeChange(a){
        service.post("/constantitem/getbyitemid",{id:a}).then(
            res=>{
                //console.log(res)
                tableData.value = res.data
            }
        )
    }
    function save() {
        //1 获取添加的表单信息
        console.log("editForm.value: ", editForm.value);

        service.post("/constantitem/saveconstant",editForm.value).then(
            res=>{
                console.log(res.data)
                // 3  判断 请求结果，成功与否
                editDialogFormVisible.value = false;

                if(res.data){
                    // 给与用户反馈
                    ElNotification({
                        title: '提示',
                        message: '保存成功!!!!!!!!!!!!!',
                        type: 'success',
                    })
                    listData();
                }else{
                    // 给与用户反馈
                    ElNotification({
                        title: '提示',
                        message: '保存失败!!!!!!!!!!!!!',
                        type: 'error',
                    })
                }
            }
        )


    }

    
    //待编辑
    function toEdit({row}){


    const id = row.id


    service.get('/constantitem/getByitemId/'+id).then(({status ,data})=>{
            //根据用户id ，查询当前待修改的数据  
            editForm.value.id =  data.id
            editForm.value.constanttypeid =  data.constanttypeid
            editForm.value.constantcode=  data.constantcode
            editForm.value.constantname=  data.constantname

            editDialogFormVisible.value = true;
    })

        
    }

    function removeByitemId(id){

    // 确认是否删除
    ElMessageBox.confirm(  '是否确认删除?',  'Warning',   {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
        

          service.get('/constantitem/deleteByitemId/'+id).then(({status ,data})=>{
                if(data){
                  // 给与用户反馈
                  ElNotification({
                    title: '提示',
                    message: '删除成功!!!!!!!!!!!!!',
                    type: 'success',
                  })
                  //查询最新的数据
                  listData();
                }else{
                    // 给与用户反馈
                    ElNotification({
                      title: '提示',
                      message: '删除失败',
                      type: 'error',
                    })
                }
          })




        })

    }

    function listData(){
        service.get("/constantitem/list").then(
            res=>{
                tableData.value = res.data;
        }
        )
    }

    onMounted(() => {
        //加载常数项所有数据
        listData()

        //加载常数类别，提供给用户选择（下拉列别）
        service.get("/constanttype/list").then(
            res=>{
                options.value = res.data
               // selectType.value = 1
            }
        )
    })
</script>